<template>
<div name='logins'>
  <link href="../../static/assets/css/style.css" rel='stylesheet' type='text/css' media="all">
  <!--//style sheet end here-->
  <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">

<body>
  <div class="mid-class">
	 <div class="art-right-w3ls">
		<h2>登录</h2>
		<form>
		   <div class="main">
			  <div class="form-left-to-w3l">
					    <input type="text" v-model="mobile" class="form-control" placeholder="电话号" size=15 required="" />
					</div>
		   </div>
		   <div class="right-side-forget">
			  <router-link to="/she">没有注册...</router-link>
		   </div>
		   <div class="clear"></div>
		   <div class="btnn">
			     <a  class="btn btn-default submit" @click="reg()" >登录</a>
		   </div>
		</form>
		<!-- //popup -->
	 </div>
	 <div class="art-left-w3ls">
       <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
        <canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas>

        <div v-if="imgSrc" class="img_bg_camera">
            <img :src="imgSrc" alt="" class="tx_img">
        </div>
        <!-- <button @click="getCompetence()">打开摄像头</button>
        <button @click="stopNavigator()">关闭摄像头</button> -->
    　　　　　<button @click="setImage()">拍照</button>
            </div>
  </div>
  
</body>





</div>
</template>
<script>


import axios from 'axios'
export default {
    data() {
        return {

            mobile:'',

            videoWidth: 300,
            videoHeight: 300,
            imgSrc: '',
            thisCancas: null,
            thisContext: null,
            thisVideo: null,
            }
    },
    mounted() {
        var _this = this
        this.thisCancas = document.getElementById('canvasCamera')
        this.thisContext = this.thisCancas.getContext('2d')
        this.thisVideo = document.getElementById('videoCamera')
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {}
        }
        // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
        // 使用getUserMedia，因为它会覆盖现有的属性。
        // 这里，如果缺少getUserMedia属性，就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先获取现存的getUserMedia(如果存在)
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
            // 有些浏览器不支持，会返回错误信息
            // 保持接口一致
            if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
            }
            // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject)
            })
          }
        }
        var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } }
        navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
          // 旧的浏览器可能没有srcObject
          if ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = stream
          } else {
            // 避免在新的浏览器中使用它，因为它正在被弃用。
            _this.thisVideo.src = window.URL.createObjectURL(stream)
          }
          _this.thisVideo.onloadedmetadata = function (e) {
            _this.thisVideo.play()
          }
        }).catch(err => {
          console.log(err)
        })

    },
    methods: {
//  绘制图片（拍照功能）
      setImage () {
        var _this = this
        // 点击，canvas画图
        _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
        // 获取图片base64链接
        var image = this.thisCancas.toDataURL('image/png')
        _this.imgSrc = image
      },

    // base64转文件
      // dataURLtoFile (dataurl, filename) {
      //   var arr = dataurl.split(',')
      //   var mime = arr[0].match(/:(.*?);/)[1]
      //   var bstr = atob(arr[1])
      //   var n = bstr.length
      //   var u8arr = new Uint8Array(n)
      //   while (n--) {
      //     u8arr[n] = bstr.charCodeAt(n)
      //   }
      //   return new File([u8arr], filename, { type: mime })
      // },

    // 关闭摄像头
      stopNavigator () {
        this.thisVideo.srcObject.getTracks()[0].stop()
      },
    //注册
      reg:function(){
            var form_data = new FormData()
            form_data.append('mobile',this.mobile)
            form_data.append('img',this.imgSrc)
            axios({
                url:this.$api+'/user/login/',
                method:'post',
                data:form_data,
            }).then(res=>{
              console.log(res)
                if(res.data.code==200){
                  window.localStorage.setItem('token',res.data.token);
                  alert(res.data.msg);
                  window.location.href = '/home'
                }else{
                  this.message=res.data.msg;
                }
            })
        },
    },
}
</script>
